<!--
 * @Author: wuzhen
 * @Date: 2020-01-15 11:29:14
 * @LastEditors  : wuzhen
 * @LastEditTime : 2020-01-17 10:37:35
 * @Description: 头部注释
 -->
<template>
  <div class="group-info flex" :style="{ left: `${left}px`, top: `${top}px` }" v-click-outside="() => $emit('on-close')">
    <template v-if="showPage">
      <div class="group-user" v-for="(item, index) in groupData.groupMember" :key="index">
        <div class="user-img">
          <img :src="iconPersonal" v-if="groupData.grouptype === 20 || !item.face" style="width:100%">
          <wz-img type="face" :src="item.face" v-else/>
        </div>
        <h3 class="user-name" v-if="groupData.grouptype === 20">{{$t("anonymous") + $t("user")}}{{item.annoyindex}}</h3>
        <h3 class="user-name" v-else>{{item.usernickname || item.username}}</h3>
      </div>
    </template>
    <div class="ivu-spin" style="display:flex;width: 100%;height:140px;align-items: center;justify-content: center;transition: none;" v-else>
      <div class="load-3">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    left: {
      type: Number,
      default: 0
    },
    top: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      groupData: {},
      showPage: false
    };
  },
  methods: {
    // 获取数据
    async getData(id) {
      this.showPage = false;
      try {
        await this.getGroupMemberData(id);
        this.groupData = this.groups.find(v => v.id === id);
        this.showPage = true;
      } catch (error) {
        throw error;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.group-info {
  position: fixed;
  z-index: 1000;
  width: 400px;
  min-height: 164px;
  max-height: 220px;
  overflow: auto;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.2);
  color: #333;
  padding: 20px;
  flex-wrap: wrap;
  .group-user {
    text-align: center;
    width: 20%;
    .user-img {
      width: 48px;
      height: 48px;
      background: #eee;
      border-radius: 4px;
      overflow: hidden;
      margin: 0 auto;
    }
    .user-name {
      font-size: 14px;
      font-weight: normal;
      padding: 10px 0;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 65px;
      margin: 0 auto;
    }
  }
}
</style>
